<%--
  Created by IntelliJ IDEA.
  User: 86189
  Date: 2022/4/25
  Time: 13:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="./layui-v2.6.8/layui/css/layui.css" media="all">
    <script src="./layui-v2.6.8/layui/layui.js"></script>
</head>
<body>

<div class="layui-card">
    <div class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">查询条件</label>
                <div class="layui-input-inline" style="width:100px;">
                    <input type="text" name="goodsName" id="goodsName" placeholder="菜名" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <div class="layui-input-inline" style="width:200px;">
                    <button class="layui-btn layuiadmin-btn-admin" id="reloadBtn" data-type="reload" lay-submit lay-filter="Search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
        <button class="layui-btn layui-btn-sm" lay-event="get">查看历史订单</button>
    </div>

</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<%--<div class="layui-input-inline">--%>
<%--    普通选择器--%>
<%--    <input class="layui-input" id="test1" type="text" placeholder="yyyy-MM-dd">--%>
<%--</div>--%>
<a name="range"> </a>
<script th:inline="javascript" type="text/html" id="imgUrl" >
    <img src="{{ d.imgUrl }}" class="laytable-cell-1-imgUrl" style="width:100px; height:100px;">
</script>
<script>

    layui.use(['table', 'jquery', 'layer'], function () {
        var table = layui.table;
        var $ = layui.jquery;
        var layer = layui.layer;

        table.render({
            height: 650
            , elem: '#test'
            , url: 'allServlet'
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , title: '用户数据表'
            , cols: [[
                {type: 'checkbox', fixed: 'left' }
                , {field: 'id', title: 'ID', width: 20, fixed: 'left', unresize: true, sort: true}
                , {field: 'goodsName', title: '菜名', width: 120, edit: 'text'}
                , {field: 'categoryId', title: '菜品类型', width: 120, edit: 'text'}
                , {field: 'description', title: '详细介绍', width: 120, edit: 'text'}
                , {field: 'price', title: '价格', width: 120, edit: 'text'}
                , {field: 'unit', title: '分量', width: 120, edit: 'text'}
                , { field: 'imgUrl', title: '图片',width: 120, align: "center", templet: "#imgUrl" },
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 120}
            ]]
            , id:'testReload'

            , page: true
        });
        $("#reloadBtn").click(function (ev) {

            var goodsName = $("#goodsName").val();
            console.info(goodsName);
            console.log(goodsName)
            table.reload('testReload', {
                url: 'SelectByConditionServlet',
                method:"post"
                , where: {
                    goodsName: goodsName,

                } //设定异步数据接口的额外参数

            });

        })
        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                case 'get':
                    window.open("${pageContext.request.contextPath}/lisimenu.jsp");
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            }
            ;
        });

        table.on('tool(test)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'del') {

                layer.confirm('真的删除行么', function (index) {

                    $.ajax({
                        url: "deleteMenuServlet",
                        type: "POST",
                        data: {"id": data.id},
                        async: false,
                        success: function (data1) {

                            if (data1 == 1) {
                                obj.del();
                                //关闭弹框
                                layer.close(index);
                                layer.msg("删除成功！");
                                table.render;
                            }
                        }
                    });
                });
            } else if (obj.event === 'edit') {
                layer.open({
                    type: 2
                    ,title: '编辑'
                    ,content: 'table.html' //展示test1.html中的layui表单
                    ,maxmin: true   //允许最大化
                    ,area: ['400px', '350px']   //弹窗的大小
                    ,btn: ['确定', '取消']
                    //yes函数是点击弹窗后回调的函数
                    ,yes: function(index, layero){
                        //通过以下的方法获取回调的数值
                        var goodsName = $(layero).find('iframe')[0].contentWindow.goodsName.value;
                        var categoryId = $(layero).find('iframe')[0].contentWindow.categoryId.value;
                        var description = $(layero).find('iframe')[0].contentWindow.description.value;
                        var price = $(layero).find('iframe')[0].contentWindow.price.value;
                        var unit = $(layero).find('iframe')[0].contentWindow.unit.value;
                        //同步数据表格中的数据
                        obj.update({
                            goodsName:goodsName,
                            categoryId:categoryId,
                            description:description,
                            price:price,
                            unit:unit
                        })
                        //利用ajax同步数据库的数据，具体的后端自己实现吧
                        $.ajax({
                            url:'updateMenuServlet',
                            type:"post",
                            contentType:"application/json;charset=utf-8",
                            dataType:'json',
                            data:{
                                goodsName:goodsName,
                                categoryId:categoryId,
                                description:description,
                                price:price,
                                unit:unit
                            },
                            success:function(res){
                                layer.msg('操作成功');
                            },
                            error:function(res){
                                layer.msg('操作失败，稍后再试！');
                            }
                        })
                        layer.close(index);

                }

                    ,success: function(layero, index){

                    var body = layer.getChildFrame('body', index);  // body.html() body里面的内容


                    //通过test1.html中各个输入框的id可以进行赋值
                    body.find("#goodsName").val(data.goodsName);
                    body.find("#categoryId").val(data.categoryId)
                    body.find("#description").val(data.description)
                     body.find("#price").val(data.price)
                    body.find("#unit").val(data.unit)
                }
            });
    }

        });







        // layui.use('laydate', function(){
        //     var laydate = layui.laydate;
        //     laydate.render({
        //         elem: '#test1'
        //     });
        // });

    });
    // //行工具事件
    // table.on('tool(test)', function(obj){
    //     var data = obj.data;
    //     //console.log(obj)
    //     if(obj.event === 'edit'){
    //         //alert("课   程号："+data.kch);
    //         var flag =true;
    //         $.ajax({
    //             url:'checkKcSelect.do'
    //             ,type: "post"
    //             ,data:{'kch':data.kch}
    //             ,async:false
    //             ,success:function (data1) {
    //
    //                 if(data1==1){
    //                     layer.msg("已经选过了",{icon:5});
    //                     flag=false;
    //                 }
    //             }
    //         });
    //         if(flag) {
    //             layer.confirm('确定选'+data.kcm+"嘛", function (index) {
    //                 obj.del();
    //                 $.post("addKcb.do",{'kch':data.kch},function (data) {
    //                     if(data==2){
    //                         layer.msg("选课成功",{icon:1});
    //                     }else {
    //                         layer.msg("选课失败",{icon:5});
    //                     }
    //                 })
    //                 //layer.close(index);
    //             });
    //         }
    //
    //     }
    // });
    // });
    //     //监听行工具事件
    //     table.on('tool(test)', function(obj){
    //         var data = obj.data;
    //         //console.log(obj)
    //         if(obj.event === 'del'){
    //             layer.confirm('真的删除行么', function(index){
    //                 obj.del();
    //                 layer.close(index);
    //             });
    //         } else if(obj.event === 'edit'){
    //             layer.prompt({
    //                 formType: 2
    //                 ,value: data.email
    //             }, function(value, index){
    //                 obj.update({
    //                     email: value
    //                 });
    //                 layer.close(index);
    //             });
    //         }
    //     });
    // });
</script>

</body>
</html>